<template>
	<view class="searchBidding">
		<view class="header">
			<view class="searchBox">
				<image src="../../../static/img/each.png" mode=""></image>
				<input  confirm-type="search" v-model="text" placeholder="输入搜索关键词" @confirm="search"/>
			</view>
		</view>
		<view class=" box10" v-for="(v,i) in info" @tap="tobiddingDetail(v.id)" v-if="len">
			<view class="list">
				<view class="userInfo">
					<image :src="v.user.headimgurl" mode="" class="userLogo"></image>
					<view class="right disFlex">
						<view class="line1 disFlex one">
							<view>
								<text class="name">{{v.user.nickname}}</text>
								<text class="addr">{{v.city.shortname}}</text>
							</view>
							<view class="lable">{{v.industry.name}}</view>
						</view>
						<view class="infos">
							<view>{{v.create_time}}</view>
							<view style="padding: 0 20rpx;">展位{{v.acreage}}m²</view>
							<view>预算{{v.cost}}元</view>
						</view>
					</view>
				</view>
				<view class="content ">
					<view class="word line3">{{v.content}}</view>
					<view class="allWord">全文</view>
				</view>
				<view class="imgs">
					<image v-for="(item,i) in v.img" :src="item" mode=""></image>
				</view>
				<view class="timeBox disFlex">
					<view class="time">招标截至时间：{{v.deadline}}</view>
					<button>立即投标</button>
				</view>
			</view>
		</view>
		<view class="listnull" v-else>
			<image src="../../../static/img/fail.png" mode=""></image>
			<view class="text">
				搜索结果为空
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:'',
				text:'',
				len:true,
			}
		},
		onLoad() {
			this.getinfo()
		},
		methods: {
			getinfo() {
				this.http('/api/tender/index', 'post', {text:this.text}, )
					.then((res) => {
						this.info = res.data.data
						console.log(this.info)
					})
			},
			search(){
				console.log(1)
				this.getinfo()
				
			},
			tobiddingDetail(v){
				uni.navigateTo({
					url: '/pages/index/bidding/biddingDetail?id=' + v
				});
			},
		}
	}
</script>

<style lang="less">
	.listnull{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 100rpx;
		
		image{
			width: 100rpx;
			height: 100rpx;
			// margin: 0 auto;
		}
		.text{
			font-size: 30rpx;
			color: #ccc;
			
		}
	}
	.searchBidding {
		.header {
			padding: 40rpx;

			.searchBox {
				height: 80rpx;
				background: rgba(245, 245, 249, 1);
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				image{
					width: 34rpx;
					height: 34rpx;
				}
				input {
					padding-left: 8rpx;
					width: 100%;
				}
			}
		}

		.list {
			padding: 40rpx;

			.userInfo {
				display: flex;
				align-items: center;

				.userLogo {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
				}

				.right {
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					align-items: flex-start;
					height: 90rpx;
					padding-left: 20rpx;
					flex: 1;

					.one {
						width: 100%;

						.name {
							font-size: 36rpx;
							font-weight: bold;
						}

						.addr {
							font-size: 24rpx;
							padding-left: 8rpx;
							color: #BEC9D7;
						}

						.lable {
							height: 40rpx;
							background: rgba(255, 241, 229, 1);
							border-radius: 20rpx 0px 20rpx 20rpx;
							padding: 0 15rpx;
							font-size: 24rpx;
							color: rgba(254, 114, 3, 1);
							line-height: 40rpx;
						}
					}

					.infos {
						display: flex;

						view {
							font-size: 24rpx;
							color: rgba(190, 201, 215, 1);
						}
					}
				}
			}

			.content {
				margin-top: 40rpx;
				display: flex;
				flex-wrap: wrap;

				.allWord {
					color: #2291FF;
					width: 60rpx;
				}
			}

			.imgs {
				display: grid;
				grid-template-columns: repeat(3, 210rpx);
				grid-column-gap: 20rpx;
				grid-row-gap: 20rpx;
				margin-top: 40rpx;

				image {
					width: 100%;
					height: 210rpx;
				}
			}

			.timeBox {
				margin-top: 40rpx;

				.time {
					font-weight: bold;
					color: rgba(254, 114, 3, 1);
				}

				button {
					width: 180rpx;
					height: 68rpx;
					line-height: 68rpx;
					background: rgba(34, 145, 255, 1) !important;
					border-radius: 34rpx;
					font-size: 32rpx;
					color: #fff;
					font-weight: bold;
				}
			}
		}

	}
</style>
